package app.agent.scatchpad

import im.mange.jetboot._
import Css._
import im.mange.jetboot.bootstrap3.Bootstrap
import im.mange.jetboot.widget.{SearchTextBox, InlineSpinner}
import jetboot._
import Html._
import Bootstrap._
import im.mange.shoreditch.engine.services.Service

//TODO: this needs a good old tidy up
//TODO: ultimately I probably need to be a table, so layout is nice
//TODO: only show add when asked and click on a row to show/edit the details
case class ScratchPadContentPresentation(services: List[Service]) extends Renderable {
  private val searchBox = SearchTextBox("scratchPadSearchServices", (query) ⇒ termsUpdated(query), default = "",
    placeholder = "Search...").classes(formControl).styles(margin("4px 2px"))

  //TODO: this obviously needs to be done in a bettewr way, so names driven off the id
  private val spinner = InlineSpinner("scratchPadSearchServicesSpinner", "", "/images/spinner_tiny.gif", initiallyHidden = true).styles(marginLeft("3px"), marginTop("3px"))

  private[scatchpad] def termsUpdated(updated: String) {
//    subscriber ! SearchRequest(updated.trim)
  }

  //TODO: make 'Search:' and add on and put some more useful info in the search e.g. check ...
  //TODO: why does search box go all small when there are no services?
  def render = {
//    val allServices = services.filterNot(_.metaData.services.isEmpty)
    val allServices = services.filterNot(_.metaData.checks.isEmpty)
    div(
      div(
        div(searchBox, spinner).classes(pullLeft, colLg12)
      ).classes(row),//.styles(clear(both)),
      Composite(allServices.map(s => div(R(s.toString)).styles(clear(both))):_*)
    ).classes(inputGroup, inputGroupSm).styles(clear(both)).render
  }

//  def onInit = searchBox.focus
//  def onInitialSet = spinner.stop
//  def onSearchRequest = spinner.start
//  def onSearchResponse = spinner.stop

//  def render = {
//    //TODO: add internal ones ...
//    div(
//      R(services.filterNot(_.offering == "[]").map(_.offering).toString())
////      Composite(services.map(s => div(app(List(s.name, s.env, "(10001)").mkString(" "), true))):_*),
////      div(Spacer()),
////      div(add)
//    ).styles(clear(both)).render
//  }

//  //TODO: need to support name ...
//  //TODO: at some point support env ...
//  //TODO: these should be buttons
//  //  if (validated) "ok" else "remove"
//  //TODO: support edit
//  //TODO: support delete
//  private def app(name: String, validated: Boolean) = {
//    Composite(
//      span().classes(glyphicon("ok"), "green"),
//      Spacer(),
//      span(R(name))
//      //      Spacer(),
//      //      span().classes(glyphicon("minus"))
//    )
//  }
//
//  //TODO: should probably have the add button presentation elsewhere
//  private def add =
//    Composite(
//      div(
//        div(nameEditor).classes(colLg6),
//        div(envEditor).classes(colLg6)
//      ).classes(row),
//      urlEditor
//    )
//
//  //TODO: there is definitely a form builder in here ...
//  //TODO: make instance of Button
//  private def urlEditor =
//    div(
//      span("Url").classes(inputGroupAddon),
//      AddSystemTextBox().classes(formControl),
//      span(
//        R(<button class="btn btn-default" type="button">
//          {span().classes(glyphicon("plus")).render}
//        </button>)
//      ).classes(inputGroupBtn)
//    ).classes(inputGroup, inputGroupSm).styles(marginTop("5px"))
//
//  //TODO: de-dupe
//  //TODO: make instance of TextBox
//  private def envEditor =
//    div(
//      R(<input type="text" class="form-control"/>),
//      span("Env").classes(inputGroupAddon)
//    ).classes(inputGroup, inputGroupSm)
//
//  //TODO: de-dupe
//  //TODO: make instance of TextBox
//  private def nameEditor =
//    div(
//      span("Name").classes(inputGroupAddon),
//      R(<input type="text" class="form-control"/>)
//    ).classes(inputGroup, inputGroupSm)
}